<template>
  <div class="flexColumn" style="overflow-y: scroll;margin-top: 60px">
    <el-card class="box-card card flexColumn" style="height: 150px;flex-shrink: 0;margin-top: -70px">
      <span class="mText">{{ careHomeName }}</span>
      <el-row style="margin-top: 20px">
        <el-col :span="8">
          <div class="flexColumn" style="align-items: center">
            <span class="lText" style="margin-bottom: 10px">{{ elderData.total }}</span>
            <span class="sText">全部老人数</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flexColumn" style="align-items: center">
            <span class="lText" style="margin-bottom: 10px">{{ elderData.selfCareCount }}</span>
            <span class="sText">可自理老人数</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flexColumn" style="align-items: center">
            <span class="lText" style="margin-bottom: 10px">{{ elderData.overEighty }}</span>
            <span class="sText">80岁以上老人数</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card card flexColumn specialCard" style="margin-top: 20px;flex-shrink: 0">
      <div class="flexRow" style="margin-bottom: 20px;margin-top: 10px">
        <div style="margin-right: auto;margin-left: 20px">
          <el-input
              class="input"
              suffix-icon="el-icon-search"
              v-model="keyword"
              clearable
              @keydown.enter.native="load"
          />
          <el-dropdown @click="load()" size="large" split-button trigger="click" @command="handleClick">
            <span style="color: var(--btnText)">{{ btnWord }}</span>
            <el-dropdown-menu ref="dropdown" slot="dropdown" :append-to-body="false"
                              style="background-color: var(--lightBg)!important;border: none">
              <el-dropdown-item command="elderly_name">根据老人姓名搜索</el-dropdown-item>
              <el-dropdown-item command="age">根据老人年龄搜索</el-dropdown-item>
              <el-dropdown-item command="sex">根据老人性别搜索</el-dropdown-item>
              <el-dropdown-item command="bed_number">根据老人床号搜索</el-dropdown-item>
              <el-dropdown-item command="id_card_number">根据身份证号搜索</el-dropdown-item>
              <el-dropdown-item command="awareness">根据认知能力搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="here"></div>
        <div style="margin-left: auto;margin-right: 10px" class="flexRow">
          <el-button @click="openAdd" class="success">
            <i style="font-weight: bold;margin-right: 5px" class="el-icon-plus"/>添加老人
          </el-button>
          <el-upload
              style="margin-left: 10px"
              :action="'https://'+serverIp + '/elderly-information/import/'+ careHome.id"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="checkFileType"
              :show-file-list="false">
            <el-button style="padding: 12px 15px;margin-right: 10px">
              <i style="font-weight: bold;margin-right: 5px" class="el-icon-download"/>批量导入
            </el-button>
          </el-upload>
          <el-button @click="exportElder">
            <i style="font-weight: bold;margin-right: 5px" class="el-icon-upload2"/>导出Excel
          </el-button>
          <el-button class="resource">
            <i style="font-weight: bold;margin-right: 5px" class="el-icon-tickets"/>下载导入模板
          </el-button>
        </div>
      </div>
      <el-table
          :data="list"
          :header-cell-style="{
                height: '70px'
              }"
          :row-style="{height: '62px'}">
        <el-table-column width="10px"/>

        <el-table-column label="老人照片" class-name="cellClass">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.image" shape="square" :size="40"/>
          </template>
        </el-table-column>

        <el-table-column
            prop="elderlyName"
            label="老人姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="bedNumber"
            label="床号">
        </el-table-column>
        <el-table-column
            prop="selfCareAbility"
            label="自理能力">
          <template slot-scope="scope">
            {{ scope.row.selfCareAbility | selfCareAbility }}
          </template>
        </el-table-column>
        <el-table-column
            prop="awareness"
            label="认知能力"
            min-width="100">
        </el-table-column>
        <el-table-column
            min-width="110"
            prop="idCardNumber"
            label="身份证号">
        </el-table-column>
        <el-table-column
            min-width="90"
            prop="admissionDate"
            label="入院日期">
        </el-table-column>
        <el-table-column
            min-width="90"
            prop="dischargeDate"
            label="出院日期">
        </el-table-column>
        <el-table-column width="20px"/>
        <el-table-column class-name="cellClass" label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button-group class="flexRow" style="align-self: center">
              <el-button @click="openEdit(scope.row)" class="btnOption primary"><span class="el-icon-edit"/></el-button>
              <el-popconfirm title="确定删除该老人的信息吗?" @confirm="delElder(scope.row)">
                <el-button slot="reference" class="btnOption danger"><span class="el-icon-delete"/></el-button>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column width="10px"/>
      </el-table>
      <el-pagination
          style="text-align: center;margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="11"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="pageChange">
      </el-pagination>
    </el-card>
    <!--弹窗部分-->
    <el-dialog :visible.sync="dialog"
               :show-close="false"
               ref="dialog"
               class="dl"
               :limit="1"
               :modal-append-to-body='false'
               :append-to-body="false"
               @close="closeDialog">
      <h1 style="font-size: 24px;padding-top: 20px;color: var(--deepText)" align="center">{{
          isAdd ? '添加' : '修改'
        }}老人信息</h1>
      <el-divider/>
      <div style="margin: 0 10% 0;padding: 3% 5% 1%;overflow-y: scroll;height: 400px">
        <el-form ref="form" :model="elder" label-width="140px" label-position="left">
          <el-form-item label="老人图片">
            <el-upload
                ref="avatar"
                class="avatar-uploader"
                :limit="1"
                :show-file-list="false"
                :on-change="uploadChange"
                :action="'https://'+ serverIp +'/elderly-information/elder/upload'"
                :auto-upload="false"
                list-type="picture"
                :on-success="handleUpload">
              <el-image v-if="upload" :src="upload" class="avatar"></el-image>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="老人姓名">
            <el-input style="width: 180px" v-model="elder.elderlyName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="elder.sex">
              <el-radio-button :label="1" style="margin-right: 1px">男</el-radio-button>
              <el-radio-button :label="0">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input style="width: 60px" v-model="elder.age"></el-input>
          </el-form-item>
          <el-form-item label="床号">
            <el-input style="width: 100px" v-model="elder.bedNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input style="width: 200px" v-model="elder.idCardNumber"></el-input>
          </el-form-item>
          <el-form-item label="自理能力">
            <el-select v-model="elder.selfCareAbility" style="width: 105px">
              <el-option :value="0" label="能力完好"></el-option>
              <el-option :value="1" label="轻度受损"></el-option>
              <el-option :value="2" label="中度受损"></el-option>
              <el-option :value="3" label="重度受损"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="认知能力">
            <el-select v-model="elder.awareness" style="width: 135px">
              <el-option value="无认知障碍"></el-option>
              <el-option value="轻度认知障碍"></el-option>
              <el-option value="中度认知障碍"></el-option>
              <el-option value="重度认知障碍"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入院日期">
            <el-date-picker
                style="width: 140px"
                value-format="yyyy-MM-dd"
                v-model="elder.admissionDate"
                type="date"
                placeholder="请选择"
                :clearable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离院日期">
            <el-date-picker
                style="width: 140px"
                value-format="yyyy-MM-dd"
                v-model="elder.dischargeDate"
                type="date"
                placeholder="请选择"
                :clearable="false">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <el-divider/>
      <div style="display: flex;flex-direction: row">
        <el-button @click="closeDialog" class="formBtn">取消</el-button>
        <el-button @click="clickAdd" v-if="isAdd" class="formBtn">添加</el-button>
        <el-button @click="clickUpdate" v-else class="formBtn">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Elder",
  data() {
    return {
      //养老院名称
      careHomeName: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).careHomeName : '',
      //老人信息
      elder: {},
      list: [],
      elderData: {},
      //分页相关
      currentPage: 1,
      pageSize: 7,
      total: 0,
      //搜索关键词
      keyword: '',
      searchMode: 'elderly_name',
      //弹窗
      dialog: false,
      //是否是添加模式
      isAdd: true,
      //ip
      serverIp: serverIp,
      //图片临时地址
      upload: '',
      //养老院信息
      careHome: {}
    }
  },
  methods: {
    //获取老人相关信息
    query() {
      this.request.get("/elderly-information/query", {params: {name: this.careHomeName}}).then(res => {
        if (res.code === '200') {
          this.elderData = res.data
        } else {
          this.$notify({
            type: 'error',
            title: '获取相关信息失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取相关信息失败',
          message: err
        })
      })
    },
    //获取老人具体信息
    load() {
      this.request.get("/elderly-information/search", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.keywordC,
          type: this.searchMode,
          name: this.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          //成功
          this.list = res.data.records
          //将字符串属性转换为Long类型
          this.total = parseInt(res.data.total)
          if ((this.total / this.pageSize + 1) < this.currentPage) {
            this.currentPage = 1
            this.load()
          }
        } else {
          this.$notify({
            type: 'error',
            title: '获取老人列表失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取老人列表失败',
          message: err
        })
      })
    },
    //修改搜索方式
    handleClick(command) {
      this.searchMode = command
    },
    //换页
    pageChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    //关闭弹窗
    closeDialog() {
      this.elder = {}
      this.dialog = false
      this.upload = ''
      this.$refs.avatar.uploadFiles = []
    },
    //打开编辑弹窗
    openEdit(elder) {
      this.isAdd = false
      this.elder = elder
      this.dialog = true
      this.upload = elder.image
    },
    //点击添加老人
    clickAdd() {
      //上传封面
      if (this.$refs.avatar.uploadFiles.length) {
        //有文件待上传，上传文件
        this.$refs.avatar.submit()
      } else {
        //没文件，直接更新
        this.addElder()
      }
    },
    //添加老人
    addElder() {
      this.elder.currentCareHomeId = this.careHome.id
      this.request.post('/elderly-information/add-elder', this.elder).then(res => {
        if (res.code === '200') {
          //成功
          this.$notify({
            type: 'success',
            title: '成功',
            message: '老人信息添加成功'
          })
          this.dialog = false
          this.load()
          this.query()
        } else {
          this.$notify({
            type: 'error',
            title: '老人信息添加失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '老人信息添加失败',
          message: err
        })
      })
    },
    //显示上传的封面
    uploadChange(file) {
      const reader = new FileReader() // 创建FileReader对象
      reader.readAsDataURL(file.raw) // 读取选择的文件的数据
      reader.onload = () => {
        this.upload = reader.result
      }
    },
    //上传封面回调
    handleUpload(res) {
      if (res.code !== '200') {
        this.$notify({
          title: '老人照片上传失败',
          message: res.msg,
          type: 'error'
        })
      } else {
        this.$notify({
          title: '老人照片上传成功',
          message: res.msg,
          type: 'success'
        })
        //将返回的封面路径存入对象
        this.elder.image = res.data[0]
      }
      if (this.isAdd) {
        this.addElder()
      } else {
        this.updateElder()
      }
    },
    //点击更新按钮
    clickUpdate() {
      if (this.$refs.avatar.uploadFiles.length) {
        //有文件待上传，上传文件
        this.$refs.avatar.submit()
      } else {
        //没文件，直接更新
        this.updateElder()
      }
    },
    //更新老人信息
    updateElder() {
      this.request.put('/elderly-information/update-elder', this.elder).then(res => {
        if (res.code === '200') {
          //成功
          this.$notify({
            type: 'success',
            title: '成功',
            message: '老人信息更新成功'
          })
          this.dialog = false
        } else {
          this.$notify({
            type: 'error',
            title: '老人信息更新失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '老人信息更新失败',
          message: err
        })
      })
    },
    //删除老人信息
    delElder(elder) {
      this.request.delete('/elderly-information/delete-elder?id=' + elder.elderlyId).then(res => {
        if (res.code === '200') {
          //成功
          this.$notify({
            type: 'success',
            title: '删除成功',
            message: elder.elderlyName + '的信息已删除'
          })
          this.load()
          this.query()
        } else {
          this.$notify({
            type: 'error',
            title: '老人信息删除失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '老人信息删除失败',
          message: err
        })
      })
    },
    //获取养老院信息
    getCareHome() {
      this.request.get('/details/query-by-name?name=' + this.careHomeName).then(res => {
        if (res.code === '200') {
          //成功
          this.careHome = res.data
        } else {
          this.$notify({
            type: 'error',
            title: '获取养老院信息失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取养老院信息失败',
          message: err
        })
      })
    },
    //打开添加窗口
    openAdd() {
      this.isAdd = true
      this.elder = {}
      this.dialog = true
      this.upload = ''
    },
    //导入导出
    exportElder() {
      window.location.href = 'https://' + serverIp + '/elderly-information/export/' + this.careHome.id;
    },
    //文件上传回调
    uploadSuccess(res) {
      if (res.code === '200') {
        this.$notify({
          type: 'success',
          title: '成功',
          message: '药品信息导入成功',
        })
        this.load()
      } else {
        this.$notify({
          type: 'error',
          title: '药品信息导入失败',
          message: res.msg,
        })
      }
    },
    uploadError(err) {
      this.$notify({
        type: 'error',
        title: '药品信息导入失败',
        message: err,
      })
    },
    checkFileType(file) {
      const tail = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (tail !== 'xlsx' && tail !== 'xls') {
        this.$notify({
          type: 'error',
          title: '文件类型错误',
          message: '上传文件需是Excel文件!'
        })
      }
      return tail === 'xlsx' || tail === 'xls'
    },
  },
  mounted() {
    this.query()
    this.load()
    this.getCareHome()
    //修改popper的所在位置
    this.$refs.here.appendChild(
        this.$refs.dropdown.popperElm
    )
  },
  computed: {
    //根据关键词类型显示按钮提示文字和图标
    btnWord() {
      switch (this.searchMode) {
        case 'elderly_name':
          return '根据老人姓名搜索'
        case 'age':
          return '根据老人年龄搜索'
        case 'sex':
          return '根据老人性别搜索'
        case 'bed_number':
          return '根据老人床号搜索'
        case 'id_card_number':
          return '根据身份证号搜索'
        case 'awareness':
          return '根据认知能力搜索'
        default:
          return '搜索'
      }
    },
    //关键词
    keywordC() {
      if (this.searchMode === 'sex') {
        return this.keyword === '男' ? '1' : this.keyword === '女' ? '0' : '2'
      } else {
        return this.keyword
      }
    }
  },
  filters: {
    //自理能力
    selfCareAbility(sca) {
      switch (sca) {
        case 0:
          return '能力完好'
        case 1:
          return '轻度受损'
        case 2:
          return '中度受损'
        case 3:
          return '重度受损'
      }
    }
  }
}
</script>

<style scoped>
/*分页管理器样式*/
>>> .btn-quicknext, >>> .btn-quickprev, >>> .btn-next, >>> .btn-prev, >>> .number {
  color: var(--deepText) !important;
  background-color: var(--deepBg) !important;
}

>>> .btn-quicknext:hover, >>> .btn-quickprev:hover, >>> .btn-next:hover, >>> .btn-prev:hover, >>> .number:hover {
  background-color: var(--hover) !important;
}

>>> .active {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
}

>>> .active:hover {
  background-color: var(--btnActive) !important;
}

/*滚动条*/
::-webkit-scrollbar {
  overflow: auto;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--th);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightText);
}

/*表格样式*/
/*表头背景*/
>>> .el-table .cell {
  height: 20px;
}

>>> .el-table th {
  background-color: var(--lightBg) !important;
}

/*表头文字*/
>>> .el-table thead {
  color: var(--th)
}

/*背景*/
>>> .el-table tr {
  background-color: var(--lightBg);
  color: var(--deepText);
  font-weight: normal;
}

/*行间线*/
>>> .el-table td, .building-top .el-table th.is-leaf {
  border-bottom: 0 !important;
}

/*表格末尾*/
>>> .el-table::before {
  border-bottom: 0;
  height: 0;
}

>>> .el-table, .el-table__expanded-cell {
  background-color: var(--lightBg) !important;
}

/*鼠标悬浮*/
>>> .el-table tbody tr:hover > td {
  background-color: var(--hover) !important;
}

.specialCard:hover {
  background-color: var(--lightBg) !important;
}

/*card*/
>>> .el-card__header {
  border-color: var(--deepText);
}

.box-card:hover {
  background-color: var(--hover);
}

.card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
}

/*文字*/
.sText {
  font-size: 13px;
  color: var(--lightText);
}

.lText {
  font-size: 24px;
  color: var(--deepText);
}

.mText {
  font-size: 18px;
  color: var(--deepText);
}

/*搜索按钮*/
>>> .el-button--default {
  font-size: 13px;
  font-weight: bold;
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
  transition: 0.2s;
}

>>> .el-button--default:hover {
  background-color: var(--btnActive);
}

>>> .el-button--default::before {
  display: none;
}

/*下拉框样式*/
>>> .el-dropdown__caret-button {
  font-size: 13px;
  font-weight: bold;
  margin-left: 2px !important;
  color: var(--btnText);
}

>>> .el-dropdown-menu {
  background-color: var(--inputBg) !important;
  padding: 0;
}

>>> .popper__arrow, >>> .popper__arrow::after {
  border-bottom-color: var(--inputBg) !important;
  border-top-color: var(--inputBg) !important;
}

>>> .el-dropdown-menu__item {
  color: var(--deepText);
  font-weight: bold;
  padding: 10px 30px;
  background-color: var(--inputBg);
}

>>> .el-dropdown-menu__item:hover {
  background-color: var(--hover);
  color: var(--deepText);
}

>>> .el-dropdown > .el-button-group > .el-button:not(:last-child) {
  width: 148px;
}

/*输入框样式*/
.input {
  margin-right: 20px;
  width: 300px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

>>> .el-input__inner {
  color: var(--deepText);
  background-color: var(--inputBg);
  border: solid 1px var(--inputBorder);
  border-radius: 5px;
}

>>> .el-select__caret {
  color: var(--deepText) !important;
}

>>> .el-date-editor .el-input__inner::placeholder {
  color: var(--lightText);
  padding-left: 10px;
}

>>> .el-input__inner::placeholder {
  color: var(--lightText);
}

>>> .el-input__icon {
  color: var(--deepText);
}

/*操作列样式*/
>>> td.cellClass .cell {
  height: 40px !important;
}

/*按钮*/
.btnOption {
  transition: 0.2s;
  padding: 10px 15px;
  color: var(--btnText);
  border: none;
  margin-top: 4px;
}

.primary {
  background-color: var(--btn);
}

.primary:hover {
  background-color: var(--btnActive);
}

.danger {
  background-color: var(--danger);
}

.danger:hover {
  background-color: var(--dangerHover);
}

.success {
  background-color: var(--success);
}

.success:hover {
  background-color: var(--successHover);
}

.resource {
  background-color: var(--resource);
}

.resource:hover {
  background-color: var(--resourceHover);
}


/*弹窗样式*/
>>> .el-dialog {
  background-color: var(--lightBg);
  border-radius: 10px;
  height: 560px;
  width: 650px;
  margin-top: calc(20% - 200px) !important;
}

>>> .el-dialog__body {
  height: 100%;
  padding: 0;
}

>>> .el-dialog__header {
  height: 0;
  padding: 0;
}

>>> .el-dialog__wrapper {
  transition-duration: 0.3s;
}

>>> .dialog-fade-enter-active {
  animation: none !important;
}

>>> .dialog-fade-leave-active {
  transition-duration: 0.15s !important;
  animation: none !important;
}

>>> .dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog {
  animation-fill-mode: forwards;
}

>>> .dialog-fade-enter-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-open;
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

>>> .dialog-fade-leave-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-close;
}

@keyframes anim-open {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
}

/*表单按钮样式*/
.formBtn {
  color: var(--btnText);
  margin: 20px auto;
  width: 140px;
  height: 40px;
  background-color: var(--btn);
  transition: 0.2s;
  font-size: 13px;
  font-weight: bold;
  border: none;
}

.formBtn:hover {
  background-color: var(--btnActive);
}

>>> .el-form-item__label {
  color: var(--deepText);
}


/*封面上传*/
.avatar-uploader-icon {
  font-size: 30px;
  color: var(--lightText);
  width: 180px;
  height: 170px;
  line-height: 170px;
}

.avatar {
  height: auto;
  width: 100%;
  object-fit: scale-down;
  margin-bottom: -10px;
  border-radius: 5px;
}

.avatar-uploader {
  width: 180px !important;
  border: 1px dashed var(--inputBorder) !important;
  border-radius: 5px;
  background-color: var(--inputBg);
}

.avatar-uploader:hover {
  border-color: var(--btn) !important;
}

.avatar-uploader:hover .avatar-uploader-icon {
  color: var(--btn);
}

.dl >>> .el-divider {
  margin: 0;
  padding: 0;
}

/*按钮式单选框*/

>>> .el-radio-button__inner {
  background-color: var(--inputBg) !important;
  color: var(--deepText) !important;
  border: none !important;
}

>>> .is-active .el-radio-button__inner {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
  border: none !important;
  box-shadow: none;
}

>>> .el-input__suffix-inner {
  color: var(--deepText);
}

</style>